<template>
	<view class="box-padding" style="--px: 26rpx">
			<view class="fn-25 flex align-center mb-30">
				请在可选日期内选择一天进行试课
			</view>
			<!-- 日历组件 -->
			<selection-time :timeObj="timeObj" :disabled="false" :choosedate="choosedate" @timechange="onTimeChange"></selection-time>
			<!-- 选择试课时间 -->
			<view style="margin: auto;margin-top: 120rpx;"><v-button @onclick="onClickComplete">预约完成</v-button></view>
			
			<model :show="isShow" :maskClosable="false">
				<view class="popup-cont">
					<view class="fn-25">您已成功预约试课</view>
					<v-button width="365" height="59" @onclick="goHome">
						<view class="fn-25" style="color: #2C0101;">返回首页</view>
					</v-button>
				</view>
			</model>
	</view>
</template>

<script>
import { toast } from '@/utils/util.js';
import selectionTime from "@/components/selection-time/selection-time.vue";
import vButton from '@/components/button/button.vue';
import model from '@/components/modal/modal.vue';
import HomeApi from '@/api/home.js';

export default {
	components: {
		vButton,
		selectionTime,
		model
	},
	data() {
		return {
			choosedate: null,
			shop_id: "",
			c_id: "",
			time: "",
			isShow: false,
			timeObj: null
		};
	},
	computed: {
		
	},
	onLoad(e) {
		this.choosedate = JSON.parse(e.timetable);
		this.shop_id = e.shop_id;
		this.c_id = e.c_id;
		this.timeObj = {
			room: e.r_name
		}
	},
	methods: {
		// 监听组件返回的数据
		onTimeChange(data) {
			console.log(data)
			this.time = data.selectToday;
		},
		async onClickComplete() {
			if(!this.time) {
				return
			}
			this.showLoading();
			const res = await HomeApi.PostPushApmt({
				shop_id: this.shop_id,
				course_id: this.c_id,
				time: this.time
			})
			this.hideLoading();
			this.isShow = true;
		},
		goHome() {
			this.isShow = false;
			setTimeout(()=> uni.switchTab({
					url: "/pages/tab/home/home"
				}), 300)
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../../common/thorui.scss";

.popup-cont{
	width: 613rpx;
	padding-top: 68rpx;
	padding-bottom: 30rpx;
	text-align: center;
	border-radius: 10rpx;
	> view{
		margin-bottom: 52rpx;
	}
}
</style>
